<template>
  <el-dialog
    v-el-drag-dialog
    class="QRcodeDialog"
    title="二维码"
    :visible.sync="isShow"
    width="300px"
    @closed="close"
  >
    <div>
      <div
        id="qrcodeTabInfo"
        ref="qrcodeTabInfoRef"
        style="width: 200px; height: 200px; margin: 0 auto;"
      />
    </div>
    <div class="mt20 tc">
      <el-button type="text" @click="down">下载二维码</el-button>
      <canvas
        v-show="false"
        id="downCanvas"
        ref="downCanvas"
        style=" background-color: white; border: 1px solid #d3d3d3;"
      />
      <img v-show="false" ref="downImg" src="" alt="">
    </div>
  </el-dialog>
</template>

<script>
  import QRCode from 'qrcodejs2'
  export default {
    data() {
      return {
        isShow: false,
        qrcodeData: {
          truckId: '',
          truckCode: '',
          type: 1
        }
      }
    },

    methods: {
      close() {
        this.isShow = false
        this.qrcodeData = {
          truckId: '',
          truckCode: '',
          type: 1
        }
        this.$refs['qrcodeTabInfoRef'].innerHTML = ''
      },
      show(row) {
        this.qrcodeData.truckId = row.truckId
        this.qrcodeData.truckCode = row.truckCode
        this.isShow = true

        this.$nextTick(() => {
          this.creatQrCode(this.qrcodeData)
        })
      },
      // 生成二维码
      creatQrCode(url) {
        const jsonUrl = JSON.stringify(url)

        new QRCode(this.$refs.qrcodeTabInfoRef, {
          text: jsonUrl,
          width: 200,
          height: 200,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
        })
      },
      // 下载图片
      down() {
        if (
          this.$refs.qrcodeTabInfoRef &&
          this.$refs.qrcodeTabInfoRef.children.length &&
          this.$refs.qrcodeTabInfoRef.children[1] &&
          this.$refs.qrcodeTabInfoRef.children[1].src
        ) {
          const imgSrc = this.$refs.qrcodeTabInfoRef.children[1].src
          const img = this.$refs['downImg']
          img.src = imgSrc
          const c = this.$refs['downCanvas']
          const ctx = c.getContext('2d')
          c.height = 240
          c.width = 220
          ctx.fillStyle = '#FF0000'
          ctx.font = '18px  宋体 bold'
          const text = this.qrcodeData.truckCode
          ctx.textAlign = 'center'
          ctx.fillText(text, 110, 230) // 添加文字 车牌号
          ctx.drawImage(img, 10, 10)

          const imageData = ctx.getImageData(0, 0, c.width, c.height)
          for (let i = 0; i < imageData.data.length; i += 4) {
            // 当该像素是透明的,则设置成白色
            if (imageData.data[i + 3] === 0) {
              imageData.data[i] = 255
              imageData.data[i + 1] = 255
              imageData.data[i + 2] = 255
              imageData.data[i + 3] = 255
            }
          }
          ctx.putImageData(imageData, 0, 0)
          const imgUrl = c.toDataURL(imgSrc)
          const a = document.createElement('a')
          const blob = this.base64ToBlob(imgUrl) // new Blob([content]);

          const evt = document.createEvent('HTMLEvents')
          evt.initEvent('click', true, true)
          a.download = this.qrcodeData.truckCode
          a.href = URL.createObjectURL(blob)
          a.dispatchEvent(
            new MouseEvent('click', { bubbles: true, cancelable: true, view: window })
          ) // 兼容火狐
        } else {
          this.$message.error('无法下载')
        }
      },
      base64ToBlob(code) {
        const parts = code.split(';base64,')
        const contentType = parts[0].split(':')[1]
        const raw = window.atob(parts[1])
        const rawLength = raw.length

        const uInt8Array = new Uint8Array(rawLength)

        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i)
        }
        return new Blob([uInt8Array], { type: contentType })
      }
    }
  }
</script>

<style lang="scss" scoped></style>
